<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Trizzy</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/green.css" id="colors">
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


<!-- Top Bar
================================================== -->
<div id="top-bar">
	<div class="container">

		<!-- Top Bar Menu -->
		<div class="ten columns">
			<ul class="top-bar-menu">
				<li><i class="fa fa-phone"></i> (564) 123 4567</li>
				<li><i class="fa fa-envelope"></i> <a href="typography.html#">mail@example.com</a></li>
				<li>
					<div class="top-bar-dropdown">
						<span>English</span>
						<ul class="options">
							<li><div class="arrow"></div></li>
							<li><a href="typography.html#">English</a></li>
							<li><a href="typography.html#">Polish</a></li>
							<li><a href="typography.html#">Deutsch</a></li>
						</ul>
					</div>
				</li>
				<li>
					<div class="top-bar-dropdown">
						<span>USD</span>
						<ul class="options">
							<li><div class="arrow"></div></li>
							<li><a href="typography.html#">USD</a></li>
							<li><a href="typography.html#">PLN</a></li>
							<li><a href="typography.html#">EUR</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		
		<!-- Social Icons -->
		<div class="six columns">
			<ul class="social-icons">
				<li><a class="facebook" href="typography.html#"><i class="icon-facebook"></i></a></li>
				<li><a class="twitter" href="typography.html#"><i class="icon-twitter"></i></a></li>
				<li><a class="dribbble" href="typography.html#"><i class="icon-dribbble"></i></a></li>
				<li><a class="gplus" href="typography.html#"><i class="icon-gplus"></i></a></li>
				<li><a class="pinterest" href="typography.html#"><i class="icon-pinterest"></i></a></li>
			</ul>
		</div>

	</div>
</div>

<div class="clearfix"></div>


<!-- Header
================================================== -->
<div class="container">

	<!-- Logo -->
	<div class="four columns">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Trizzy" /></a></h1>
			</div>
	</div>
	

	<!-- Additional Menu -->
	<div class="twelve columns">
		<div id="additional-menu">
			<ul>
				<li><a href="shopping-cart.html">Shopping Cart</a></li>
				<li><a href="wishlist.html">WishList <span>(2)</span></a></li>
				<li><a href="checkout-billing-details.html">Checkout</a></li>
				<li><a href="my-account.html">My Account</a></li>
			</ul>
		</div>
	</div>

	
	<!-- Shopping Cart -->
	<div class="twelve columns">

		<div id="cart">
				
			<!-- Button -->
			<div class="cart-btn">
				<a href="typography.html#" class="button adc">$178.00</a>
			</div>

			<div class="cart-list">

			<div class="arrow"></div>

				<div class="cart-amount">
					<span>2 items in the shopping cart</span>
				</div>

					<ul>
						<li>
							<a href="typography.html#"><img src="images/small_product_list_08.jpg" alt="" /></a>
							<a href="typography.html#">Converse All Star Trainers</a>
							<span>1 x $79.00</span>
							<div class="clearfix"></div>
						</li>

						<li>
							<a href="typography.html#"><img src="images/small_product_list_09.jpg" alt="" /></a>
							<a href="typography.html#">Tommy Hilfiger <br /> Shirt Beat</a>
							<span>1 x $99.00</span>
							<div class="clearfix"></div>
						</li>
					</ul>

				<div class="cart-buttons button">
					<a href="shopping-cart.html" class="view-cart" ><span data-hover="View Cart"><span>View Cart</span></span></a>
					<a href="checkout-billing-details.html" class="checkout"><span data-hover="Checkout">Checkout</span></a>
				</div>
				<div class="clearfix">

				</div>
			</div>

		</div>

		<!-- Search -->
		<nav class="top-search">
			<form action="typography.html#" method="get">
				<button><i class="fa fa-search"></i></button>
				<input class="search-field" type="text" placeholder="Search" value=""/>
			</form>
		</nav>

	</div>

</div>


<!-- Navigation
================================================== -->
<div class="container">
	<div class="sixteen columns">

		<a href="typography.html#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a>

		<nav id="navigation">
			<ul class="menu" id="responsive">
			  
				<li><a href="index.html" class="homepage">Home</a></li>
				

				<li class="dropdown">
					<a href="typography.html#">Shop</a>
					<ul>
						<li><a href="shop-with-sidebar.html">Shop With Sidebar</a></li>
						<li><a href="shop-full-width.html">Shop Full Width</a></li>
						<li><a href="checkout-billing-details.html">Checkout Pages</a></li>
						<li><a href="shop-categories-grid.html">Categories Grid</a></li>
						<li><a href="single-product-page.html">Single Product Page</a></li>
						<li><a href="variable-product-page.html">Variable Product Page</a></li>
						<li><a href="wishlist.html">Wishlist Page</a></li>
						<li><a href="shopping-cart.html">Shopping Cart</a></li>
					</ul>
				</li>

			  
				<li>
					<a href="typography.html#">Features</a>
					<div class="mega">
						<div class="mega-container">

							<div class="one-column">
								<ul>
									<li><span class="mega-headline">Example Pages</span></li>
									<li><a href="contact.html">Contact</a></li>
									<li><a href="about.html">About Us</a></li>
									<li><a href="services.html">Services</a></li>
									<li><a href="faq.html">FAQ</a></li>
									<li><a href="404-page.html">404 Page</a></li>
								</ul>
							</div>

							<div class="one-column">
								<ul>
									<li><span class="mega-headline">Featured Pages</span></li>
									<li><a href="index-2.html">Business Homepage</a></li>
									<li><a href="shop-with-sidebar.html">Default Shop</a></li>
									<li><a href="blog-masonry.html">Masonry Blog</a></li>
									<li><a href="variable-product-page.html">Variable Product</a></li>
									<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
								</ul>
							</div>

							<div class="one-column hidden-on-mobile">
								<ul>
									<li><span class="mega-headline">Paragraph</span></li>
									<li><p>This <a href="typography.html#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p></li>
								</ul>
							</div>

							<div class="one-fourth-column hidden-on-mobile">
								<a href="typography.html#" class="img-caption margin-reset">
									<figure>
										<img src="images/menu-banner-01.jpg" alt="" />
										<figcaption>
											<h3>Jeans</h3>
											<span>Pack for Style</span>
										</figcaption>
									</figure>
								</a>
							</div>

							<div class="one-fourth-column hidden-on-mobile">
								<a href="typography.html#" class="img-caption margin-reset">
									<figure>
										<img src="images/menu-banner-02.jpg" alt="" />
										<figcaption>
											<h3>Sunglasses</h3>
											<span>Nail the Basics</span>
										</figcaption>
									</figure>
								</a>
							</div>

							<div class="clearfix"></div>
						</div>
					</div>
				</li>


				<li class="dropdown">
					<a href="typography.html#" class="current">Shortcodes</a>
					<ul>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="pricing-tables.html">Pricing Tables</a></li>
						<li><a href="icons.html">Icons</a></li>
					</ul>
				</li>


				<li class="dropdown">
					<a href="typography.html#">Portfolio</a>
					<ul>
						<li><a href="portfolio-3-columns.html">3 Columns</a></li>
						<li><a href="portfolio-4-columns.html">4 Columns</a></li>
						<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
						<li><a href="single-project.html">Single Project</a></li>
					</ul>
				</li>
				

				<li class="dropdown">
					<a href="typography.html#">Blog</a>
					<ul>
						<li><a href="blog-standard.html">Blog Standard</a></li>
						<li><a href="blog-masonry.html">Blog Masonry</a></li>
						<li><a href="blog-single-post.html">Single Post</a></li>
					</ul>
				</li>


				<li class="demo-button">
				  <a href="typography.html#">Get This Theme</a>
				</li> 

			</ul>
		</nav>
	</div>
</div>


<!-- Titlebar
================================================== -->
<section class="titlebar">
<div class="container">
	<div class="sixteen columns">
		<h2>Typography</h2>
		
		<nav id="breadcrumbs">
			<ul>
				<li><a href="typography.html#">Home</a></li>
				<li><a href="typography.html#">Shortcodes</a></li>
				<li>Typography</li>
			</ul>
		</nav>
	</div>
</div>
</section>


<!-- Content
================================================== -->

<!-- Container -->
<div class="container">

	<!-- Blockquote
	================================================== -->

	<div class="sixteen columns">
	
		<!-- Headline -->
		<h3 class="headline">Blockquote</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div>

		<p>Maecenas dolor est, interdum a euismod eu, accumsan posuere nisl. Nam sed iaculis massa. Sed nisl lectus, tempor sed euismod quis, sollicitudin nec est. Suspendisse dignissim bibendum tempor. Nam erat felis, commodo sed semper commodo vel mauris suspendisse dignissim bibendum tempus.</p>
		<blockquote>Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor.</blockquote>
		<p>In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim. Morbi augue velit, tempus mattis dignissim nec, porta sed risus. Donec eget magna eu lorem tristique pellentesque eget eu dui. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium hendrerit fermentum.</p>
	
	</div>

</div>
<!-- Container / End -->


<br>


<!-- Container -->
<div class="container">

	<!-- Dropcap
	================================================== -->
	<div class="sixteen columns"><h3 class="headline">Dropcap</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div></div>
	<div class="eight columns">
	
		<p><span class="dropcap">D</span> onec varius condimentum augue, nec mollis risus egestas sit amet. Etiam elit est, tincidunt non tincidunt sit amet, mollis vitae orci. Suspendisse sit amet turpis quam. Sed varius magna nec felis faucibus blandit. Quisque at gravida ante. Phasellus sagittis aliquam sodales. Donec a tortor vitae dolor sagittis aliquam eu id lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac dapibus nisl. Proin in tellus non velit sagittis viverra vel sit amet dui.</p>
	
	</div>

	<div class="eight columns">
	
		<p><span class="dropcap full">D</span> onec varius condimentum augue, nec mollis risus egestas sit amet. Etiam elit est, tincidunt non tincidunt sit amet, mollis vitae orci. Suspendisse sit amet turpis quam. Sed varius magna nec felis faucibus blandit. Quisque at gravida ante. Phasellus sagittis aliquam sodales. Donec a tortor vitae dolor sagittis aliquam eu id lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac dapibus nisl. Proin in tellus non velit sagittis viverra vel sit amet dui.</p>
	
	</div>

</div>
<!-- Container / End -->


<br>


<!-- Container -->
<div class="container">

	<!-- Lightbox
	================================================== -->

	<div class="sixteen columns example-gallery">
	
		<!-- Headline -->
		<h3 class="headline">Lightbox</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>

		<div class="two columns alpha">
			<strong class="margin-bottom-5">Single Image</strong>
			<a class="mfp-image" href="images/lightbox-sample-01a.jpg" title="Image Caption"><img src="images/lightbox-sample-01b.jpg" alt="" /></a>	
        </div>


		<div class="five columns">
			<strong class="margin-bottom-5">Images Gallery</strong>
			<a href="images/lightbox-sample-02a.jpg" class="mfp-gallery margin-bottom-5 margin-right-5" title="First Caption"><img src="images/lightbox-sample-02b.jpg" alt="" /></a>
			<a href="images/lightbox-sample-03a.jpg" class="mfp-gallery margin-bottom-5 margin-right-5" title="Second Caption"><img src="images/lightbox-sample-03b.jpg" alt="" /></a>
			<a href="images/lightbox-sample-04a.jpg" class="mfp-gallery margin-bottom-5 margin-right-5" title="Third Caption"><img src="images/lightbox-sample-04b.jpg" alt="" /></a>
        </div>

		<div class="three columns">
			<strong class="margin-bottom-5">Popup With Content</strong>
		    <a class="popup-with-zoom-anim button color" href="typography.html#small-dialog" ><i class="fa fa-info-circle"></i> Open Popup</a><br/>

			<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
				<h2 class="margin-bottom-10">Modal Popup</h2>
				<p class="margin-reset">Donec fermentum, quam et dapibus facilisis, diam massa mollis lorem, vitae suscipit purus mi ac enim. Vestibulum sed massa vestibulum, consequat massa nec, pharetra arcu. Aliquam a quam et velit dapibus posuere eu in erat. </p>
			</div>
        </div>

		<div class="four columns omega">
			<strong class="margin-bottom-5">>Video and Google Maps</strong>

			<a class="popup-youtube" href="https://www.youtube.com/watch?v=keDneypw3HY">Open YouTube Video</a><br>
			<a class="popup-vimeo" href="https://vimeo.com/45830194">Open Vimeo Video</a><br>
			<a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
    
        </div>
	
	</div>

</div>
<!-- Container / End -->

<br>
<br>

<!-- Container -->
<div class="container">

	<!-- Hightlights
	================================================== -->

	<div class="sixteen columns">
	
		<!-- Headline -->
		<h3 class="headline">Highlights</h3><span class="line margin-bottom-25"></span><div class="clearfix"></div>
		
		<p>Aliquam sed leo leo, at aliquam felis. Sed sed purus ac <span class="highlight gray">lacus faucibus placerat</span>. Donec hendrerit dapibus justo, bibendum iaculis sem vehicula sed. Fusce dolor orci, eleifend quis dignissim non, tristique sit amet lorem ipsum dolor sit amet elit. Maecenas semper venenatis felis eu <span class="highlight color">hendrerit in tincidunt</span> vehicula. Cras dictum mi nec dolor  justo lacinia. Nunc at sem lectus, quis <span class="highlight light">aliquam metus</span>. Nam sagittis est at erat tincidunt ut porttitor eros viverra</p>
	
	</div>

</div>
<!-- Container / End -->


<br>


<!-- Container -->
<div class="container">

	<!-- Tooltips
	================================================== -->

		<div class="sixteen columns">
		
			<!-- Headline -->
			<h3 class="headline">Tooltips</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div>
		
			<p>Maecenas dolor est, interdum a euismod eu, <a href="typography.html#" class="tooltip top" title="First Tooltip">tooltip from top</a> nisl. Nam sed iaculis massa. Sed nisl lectus, tempor sed euismod quis, sollicitudin est <a href="typography.html#" class="tooltip right" title="Second Tooltip">tooltip from right</a> dignissim bibendum <a href="typography.html#" class="tooltip left" title="Third Tooltip">tooltip from left</a> nam erat felis, commodo sed semper commodo vel mauris <a href="typography.html#" class="tooltip bottom" title="Fourth Tooltip">tooltip from bottom</a> bibendum tempus.</p>
		</div>

</div>
<!-- Container / End -->


<br>


<!-- Container -->
<div class="container">

	<!-- Buttons
	================================================== -->

		<div class="sixteen columns">
		
			<!-- Headline -->
			<h3 class="headline">Buttons</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div>
		
			<a href="typography.html#" class="button color">Unlimited Colors</a>&nbsp;
			<a href="typography.html#" class="button color"><i class="fa  fa-send"></i> Submit</a>&nbsp;

			<a href="typography.html#" class="button gray">Flexible Width</a>&nbsp;
			<a href="typography.html#" class="button gray"><i class="fa fa-folder-open white"></i> Download File</a>&nbsp;

			<a href="typography.html#" class="button dark">Dark Button</a>
			<a href="typography.html#" class="button dark"><i class="fa fa-shopping-cart"></i> Purchase Now</a>

		</div>

</div>
<!-- Container / End -->


<br>
<br>


<!-- Container -->
<div class="container">

	<!-- List Styles
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="headline">List Styles</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div>
		</div>

		<div class="four columns">
			<ul class="list-1">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
				<li>Facilisis in pretium nisl aliquet</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="list-2">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
				<li>Facilisis in pretium nisl aliquet</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="list-3 color">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
				<li>Facilisis in pretium nisl aliquet</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="list-4 color">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
				<li>Facilisis in pretium nisl aliquet</li>
			</ul>
		</div>


</div>
<!-- Container / End -->


<br>
<br>
	


<!-- Container -->
<div class="container">
	<div class="sixteen columns">
		<h3 class="headline">Grid System</h3><span class="line margin-bottom-15"></span><div class="clearfix"></div>
	</div>
</div>
<!-- Container End -->

<!-- Container -->
<div class="container example-grid">

	<div class="one column">One</div>
	<div class="fifteen columns">Fifteen</div>

	<div class="two columns">Two</div>
	<div class="fourteen columns">Fourteen</div>

	<div class="three columns">Three</div>
	<div class="thirteen columns">Thirteen</div>

	<div class="four columns">Four</div>
	<div class="twelve columns">Twelve</div>

	<div class="five columns">Five</div>
	<div class="eleven columns">Eleven</div>

	<div class="six columns">Six</div>
	<div class="ten columns">Ten</div>

	<div class="seven columns">Seven</div>
	<div class="nine columns">Nine</div>

	<div class="eight columns">Eight</div>
	<div class="eight columns">Eight</div>

	<div class="clearfix"></div>
	<br>

	<div class="one-third column">One Third</div>
	<div class="one-third column">One Third</div>
	<div class="one-third column">One Third</div>

	<div class="one-third column">One Third</div>
	<div class="two-thirds column">Two Thirds</div>


</div>
<!-- Container End -->

<div class="margin-top-40"></div>

<!-- Footer
================================================== -->
<div id="footer">

	<!-- Container -->
	<div class="container">

		<div class="four columns">
			<img src="images/logo-footer.png" alt="" class="margin-top-10"/>
			<p class="margin-top-15">Nulla facilisis feugiat magna, ut molestie metus hendrerit vitae. Vivamus tristique lectus at varius rutrum. Integer lobortis mauris non consectetur eleifend.</p>
		</div>

		<div class="four columns">
		
			<!-- Headline -->
			<h3 class="headline footer">Customer Service</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			
			<ul class="footer-links">
				<li><a href="typography.html#">Order Status</a></li>
				<li><a href="typography.html#">Payment Methods</a></li>
				<li><a href="typography.html#">Delivery & Returns</a></li>
				<li><a href="typography.html#">Privacy Policy</a></li>
				<li><a href="typography.html#">Terms & Conditions</a></li>
			</ul>

		</div>

		<div class="four columns">

			<!-- Headline -->
			<h3 class="headline footer">My Account</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			
			<ul class="footer-links">
				<li><a href="typography.html#">My Account</a></li>
				<li><a href="typography.html#">Order History</a></li>
				<li><a href="typography.html#">Wish List</a></li>
			</ul>

		</div>

		<div class="four columns">

			<!-- Headline -->
			<h3 class="headline footer">Newsletter</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			<p>Sign up to receive email updates on new product announcements, gift ideas, special promotions, sales and more.</p>

			<form action="typography.html#" method="get">
				<button class="newsletter-btn" type="submit">Join</button>
				<input class="newsletter" type="text" placeholder="mail@example.com" value=""/>
			</form>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer / End -->

<!-- Footer Bottom / Start -->
<div id="footer-bottom">

	<!-- Container -->
	<div class="container">

		<div class="eight columns">© Copyright 2014 by <a href="typography.html#">trizzy</a>. All Rights Reserved.</div>
		<div class="eight columns">
			<ul class="payment-icons">
				<li><img src="images/visa.png" alt="" /></li>
				<li><img src="images/mastercard.png" alt="" /></li>
				<li><img src="images/skrill.png" alt="" /></li>
				<li><img src="images/moneybookers.png" alt="" /></li>
				<li><img src="images/paypal.png" alt="" /></li>
			</ul>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer Bottom / End -->

<!-- Back To Top Button -->
<div id="backtotop"><a href="typography.html#"></a></div>

</div>


<!-- Java Script
================================================== -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/jquery.jpanelmenu.js"></script>
<script src="scripts/jquery.themepunch.plugins.min.js"></script>
<script src="scripts/jquery.themepunch.revolution.min.js"></script>
<script src="scripts/jquery.themepunch.showbizpro.min.js"></script>
<script src="scripts/jquery.magnific-popup.min.js"></script>
<script src="scripts/hoverIntent.js"></script>
<script src="scripts/superfish.js"></script>
<script src="scripts/jquery.pureparallax.js"></script>
<script src="scripts/jquery.pricefilter.js"></script>
<script src="scripts/jquery.selectric.min.js"></script>
<script src="scripts/jquery.royalslider.min.js"></script>
<script src="scripts/SelectBox.js"></script>
<script src="scripts/modernizr.custom.js"></script>
<script src="scripts/waypoints.min.js"></script>
<script src="scripts/jquery.flexslider-min.js"></script>
<script src="scripts/jquery.counterup.min.js"></script>
<script src="scripts/jquery.tooltips.min.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/puregrid.js"></script>
<script src="scripts/stacktable.js"></script>
<script src="scripts/custom.js"></script>


<!-- Style Switcher
================================================== -->
<script src="scripts/switcher.js"></script>

<div id="style-switcher">
	<h2>Style Switcher <a href="typography.html#"></a></h2>
	
	<div><h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="typography.html#" class="green" title="Green"></a></li>
			<li><a href="typography.html#" class="blue" title="Blue"></a></li>
			<li><a href="typography.html#" class="orange" title="Orange"></a></li>
			<li><a href="typography.html#" class="navy" title="Navy"></a></li>
			<li><a href="typography.html#" class="yellow" title="Yellow"></a></li>
			<li><a href="typography.html#" class="peach" title="Peach"></a></li>
			<li><a href="typography.html#" class="beige" title="Beige"></a></li>
			<li><a href="typography.html#" class="purple" title="Purple"></a></li>
			<li><a href="typography.html#" class="celadon" title="Celadon"></a></li>
			<li><a href="typography.html#" class="pink" title="Pink"></a></li>
			<li><a href="typography.html#" class="red" title="Red"></a></li>
			<li><a href="typography.html#" class="brown" title="Brown"></a></li>
			<li><a href="typography.html#" class="cherry" title="Cherry"></a></li>
			<li><a href="typography.html#" class="cyan" title="Cyan"></a></li>
			<li><a href="typography.html#" class="gray" title="Gray"></a></li>
			<li><a href="typography.html#" class="darkcol" title="Dark"></a></li>
		</ul>
		
		<h3>Layout Style</h3>
		<div class="layout-style">
			<select id="layout-style"> 
				<option value="1">Boxed</option>
				<option value="2">Wide</option>
			</select>
		</div>
	
	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="typography.html#" class="bg1"></a></li>
			<li><a href="typography.html#" class="bg2"></a></li>
			<li><a href="typography.html#" class="bg3"></a></li>
			<li><a href="typography.html#" class="bg4"></a></li>
			<li><a href="typography.html#" class="bg5"></a></li>
			<li><a href="typography.html#" class="bg6"></a></li>
			<li><a href="typography.html#" class="bg7"></a></li>
			<li><a href="typography.html#" class="bg8"></a></li>
			<li><a href="typography.html#" class="bg9"></a></li>
			<li><a href="typography.html#" class="bg10"></a></li>
			<li><a href="typography.html#" class="bg11"></a></li>
			<li><a href="typography.html#" class="bg12"></a></li>
			<li><a href="typography.html#" class="bg13"></a></li>
			<li><a href="typography.html#" class="bg14"></a></li>
			<li><a href="typography.html#" class="bg15"></a></li>
			<li><a href="typography.html#" class="bg16"></a></li>
		</ul>
		
	<h3>Background Color</h3>
		<ul class="colors bgsolid" id="bgsolid">
			<li><a href="typography.html#" class="green-bg" title="Green"></a></li>
			<li><a href="typography.html#" class="blue-bg" title="Blue"></a></li>
			<li><a href="typography.html#" class="orange-bg" title="Orange"></a></li>
			<li><a href="typography.html#" class="navy-bg" title="Navy"></a></li>
			<li><a href="typography.html#" class="yellow-bg" title="Yellow"></a></li>
			<li><a href="typography.html#" class="peach-bg" title="Peach"></a></li>
			<li><a href="typography.html#" class="beige-bg" title="Beige"></a></li>
			<li><a href="typography.html#" class="purple-bg" title="Purple"></a></li>
			<li><a href="typography.html#" class="red-bg" title="Red"></a></li>
			<li><a href="typography.html#" class="pink-bg" title="Pink"></a></li>
			<li><a href="typography.html#" class="celadon-bg" title="Celadon"></a></li>
			<li><a href="typography.html#" class="brown-bg" title="Brown"></a></li>
			<li><a href="typography.html#" class="cherry-bg" title="Cherry"></a></li>
			<li><a href="typography.html#" class="cyan-bg" title="Cyan"></a></li>
			<li><a href="typography.html#" class="gray-bg" title="Gray"></a></li>
			<li><a href="typography.html#" class="dark-bg" title="Dark"></a></li>
		</ul>
	</div>
	
	<div id="reset"><a href="typography.html#" class="button color">Reset</a></div>
		
</div>


</body>
</html>